<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>公交查询首页</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-cache" />
  
  <meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Expires" content="0"> 

  <link rel="alternate icon" type="image/png" href="assets/i/favicon.png">

  <link rel="stylesheet" href="assets/css/amaze.min.css">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/fonts2/iconfont.css">
<link rel="stylesheet" href="assets/css/app.css">
  <script src="assets/js/jquery.min.js"></script>
<script src="assets/js/handlebars.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=W7L9pFfPKrkMlRO0EHuLoxWd"></script>

<style>
	body{
		padding-bottom:50px;
		position:static;
	}
	.search-content{
		padding: .5rem;
	}
	.am-content{
		background:#FFFFFF;
		border-top:1px solid #d6d6d6;
	}
	
	.history{
		background:#FFFFFF;
		border-top:1px solid #d6d6d6;
		display:none;
	}
	
	input{
		border-radius: 5px 5px;
		border: 0px solid #E4DADA;
		line-height: 3rem;
		padding: 0px 1rem;
		float:left;
	}

	.icon-search{
		position: absolute;
		right: 20px;
		margin-top: 2px;
		color:#dcdcdc;
		padding: 0px 1rem;
	}
	
	.icon-loadd{
		position: absolute;
		right: 20px;
		margin-top: 2px;
		color:#dcdcdc;
		padding: 0px 1rem;
	}
	.icon-refresh{
		color:#dcdcdc;
	}
	
	table{
		width:100%;
	}
	.item{
		padding: .8rem;
		border-bottom:1px solid #EFEEEE;
		color:#9b9b9b;
	}
	.number{
		color:#fab34d;
	}
	
	.item .title{
		color:#3d4245;
	}
	.item .title .spanright{
		float:right;
		color:#cccccc;
		font-size:1.2rem;
	}
	.item .title .iconfont{
		color:#5eacf6;
	}

	.item .content .line{
		padding: .8rem;
		height: inherit;
		background: transparent;
		font-size: 1.4rem;
	}
	.am-btn-default{
		background-color: #FFFFFF;
	    width: 80%;
	    margin-top: 20px;
	    border-radius: 5px;
	}
	.icon-jiantou{
		font-size:1.5rem;
		padding-left:5px;
	}
	.line1{
		border-right:1px solid #EFEEEE;
	}
	
	.routeStyle{
		padding:5px;
		color:#9b9b9b;
	}
	.select{
		color:#1a7de2;
	}
	.icon-right{
		color:#EFEEEE;
		font-size:1.5rem;
		margin:0 5px;
		font-weight:bold;
	}
	.footer{
		position: fixed;
		bottom:0;
		left:0;
		width:100%;
		z-index:100;
		background-color:#f5f5f5;
		border-top:1px solid #EFEEEE;
		height:50px;
		padding:0px 2%;
	}
	.mid{
		float:left;
		width:33%;
		text-align: center;
	}
	.head{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		z-index:100;
	}
</style>

</head>
<body>
	<header class="demo-bar head">
		<a href="javascript:void(0);" id="back2" onclick="$('#sy').click();" class="icon iconfont icon-left demo-icon-home"></a>
		<h1>线路规划<span id="result" style="float:right;font-size:1.3rem;">搜索</span></h1>
		<div style="clear:both;"></div>
	</header>
	
	<div style="float:left;margin-top:50px;">
		<div class="search-content" style="border-bottom:1px solid #EFEEEE;">
			<img style="float:left;margin:10px 10px;" src="images/circlegreen.png" width="10px" height="10px"/>&nbsp;
			<input type="text" id="start" placeholder="输入起点"/>
			<div style="clear:both;"></div>
		</div>
		<div class="search-content">
			<img style="float:left;margin:10px 10px;" src="images/circlered.png" width="10px" height="10px"/>&nbsp;
			<input type="text" id="target" placeholder="输入终点"/>
		</div>
		
	</div>
	<div class="search-content" style="float:right;width:15%;line-height:76px;margin-top:50px;">
		<img src="images/exchange.png" width="20px" height="20px" onclick="exchange();"/>
	</div>
	<div style="clear:both;"></div>
	<div id="l-map" style="display:none"></div>
	<div id="driving_way" style="padding:10px 5%;border-top:1px solid #EFEEEE;font-size:1.45rem;">
		<div class="mid line1"><span value="0" class="routeStyle select">较快捷<i class="icon iconfont icon-jiantou"></i></span></div>
		<div class="mid line1"><span value="1" class="routeStyle noSelect">少换乘<i class="icon iconfont icon-jiantou"></i></span></div>
		<div class="mid"><span value="2" class="routeStyle noSelect">少步行<i class="icon iconfont icon-jiantou"></i></div>
		<div style="clear:both;"></div>
	</div>
	<div style="background-color:#f5f5f5;line-height:10px;height:10px;"></div>
	<div class="history">
		<div class="item">
			<table>
				<tr>
					<td><div style="font-size: 1.5rem;padding-top: .8rem;">搜索历史</div></td>
					<td align="right"></td>
				</tr>
			</table>
		</div>
		<div id="historylist">
		
		</div>
		<div id ="clearHistory" align="center" style="padding:10px;color:#cccccc;" onclick="clearHistory();">清空搜索历史</div>
	</div>
	<div class="sites">
		<div class="item">
			<table>
				<tr>
					<td><div style="font-size: 1.5rem;padding-top: .8rem;"></div></td>
					<td align="right"></td>
				</tr>
			</table>
		</div>
	</div>	
	<div id="list">
	</div>
	<footer class="footer">
		<div id="sy" style="width:32%;float:left;text-align:center;color:#9b9b9b;">
			<ul style="list-style:none;">
				<li><i class="icon iconfont icon-bus" style="font-size:24px;line-height:30px;top:0px;"></i></li>
				<li style="line-height:15px;"><span style="font-size:12px;">线路查询</span></li>
			</ul>
		</div>
		<div id="xlgh" style="width:32%;float:left;text-align:center;color:#1a7de2;">
			<ul style="list-style:none;">
				<li><i class="icon iconfont icon-guiji" style="font-size:24px;line-height:30px;top:0px;"></i></li>
				<li style="line-height:15px;"><span style="font-size:12px;">线路规划</span></li>
			</ul>
		</div>
		<div id="wdsc" style="width:32%;float:left;text-align:center;color:#9b9b9b;">
			<ul style="list-style:none;">
				<li><i class="icon iconfont icon-user" style="font-size:22px;line-height:30px;top:0px;"></i></li>
				<li style="line-height:15px;"><span style="font-size:12px;">我的收藏</span></li>
			</ul>
		</div>
	</footer>
	
	<script id="list-site-result" type="text/x-handlebars-template">
		{{#each result}}
			<div class="item" >
				<div class="title">
					<i class="icon iconfont icon-lubiao"></i>
					{{#each sites}}
						{{this}}
						{{#compare (addOne @index)  ../sites.length}}<i class="icon iconfont icon-right"></i>{{/compare}}
					{{/each}}
				</div>
				<div class="content">
					<span  class="line">直达</span>|<span  class="line">约{{duration}}</span>|<span  class="line">约{{distance}}</span>
				</div>
				<div class="content">
					<img src="images/address.png" width="30px" height="30px" /><span  class="line" style="color:#3d4245;">{{beginSite}}</span>
					<img src="images/runlog.png" width="20px" height="20px" /><span  class="line">步行约{{routeTotal}}米</span>
				</div>
			</div>
		{{/each}}
	</script>
	
	<script id="list-site-history" type="text/x-handlebars-template">
		{{#each result}}
			<div class="item">
				<div class="title" onclick="searchHistory(this);">
					<i class="icon iconfont icon-lubiao"></i><span>{{keyword}}</span>
				</div>
			</div>
		{{/each}}
	</script>
	
	<script id="list-site-templ" type="text/x-handlebars-template">
		{{#each result}}
			<div class="item">
				<div class="title" onclick="searchSite(this);">
					<i class="icon iconfont icon-lubiao"></i><span>{{siteName}}</span>
				</div>
			</div>
		{{/each}}
	</script>
		

	<script type="text/javascript">
		var query = $.getLocationQueryData();
		
		var longitude = query.longitude;
		var latitude = query.latitude;
		var phone = query.phone;
		
		//初始化百度地图
		var map = new BMap.Map("l-map"); 
		map.centerAndZoom(new BMap.Point(119.486324, 31.424256), 10);
		map.enableScrollWheelZoom();
		
		Handlebars.registerHelper("compare",function(v1,v2,options){
           		if(v1!=v2){
             		//满足添加继续执行
             		return options.fn(this);
           		}else{
             		//不满足条件执行{{else}}部分
             		return options.inverse(this);
           		}
         	});
         	
         	var handleHelper = Handlebars.registerHelper("addOne",function(index){
	         	//返回+1之后的结果
	         	return index+1;
	       });
		
		var transit = new BMap.TransitRoute(map, {renderOptions: {map: map},policy: 0, onSearchComplete: function(searchResult){       
			if (transit.getStatus() == BMAP_STATUS_SUCCESS){
				// 输出信息
				$("#list").html("");
				for (var i = 0; i < searchResult.getNumPlans(); i++){
					var plan = searchResult.getPlan(i);
					var desc = plan.getDescription(false);
					var distance = plan.getDistance(true);
					var duration = plan.getDuration(true);
					var siteArr = explainSite(desc);
					var routeTotal = explainRouteTotal(desc);
					var result=[{
						"sites":[],
						"distance":"",
						"duration":"",
						"routeTotal":0,
						"beginSite":""
					}];
					var data ={"result" : result};
					data.result[0].sites=siteArr;
					data.result[0].distance=distance;
					data.result[0].duration=duration;
					data.result[0].routeTotal=routeTotal;
					data.result[0].beginSite=$("#start").val();
					var myTemplate = Handlebars.compile($('#list-site-result').html());
					var html = myTemplate(data);
					$("#list").append(html);
					$.AMUI.progress.done();
				}
			}
		}});
		
		var routePolicy = [BMAP_TRANSIT_POLICY_LEAST_TIME,BMAP_TRANSIT_POLICY_LEAST_TRANSFER,BMAP_TRANSIT_POLICY_LEAST_WALKING,BMAP_TRANSIT_POLICY_AVOID_SUBWAYS];
		
		$("#result").click(function(){
			map.clearOverlays(); 
			var start = $("#start").val();
			var end = $("#target").val();
			var i=$("#driving_way select").val();
			map.centerAndZoom(new BMap.Point(119.486324, 31.424256), 10);
			search(start,end,routePolicy[i]); 
		});
		
		function search(start,end,route){ 
			$("#list").html("");
			$.AMUI.progress.start();
			if(start=='输入起点'||end=='输入终点'||start==''||end=='') {
				$.alert("请输出起点和终点");
				$.AMUI.progress.done();
				return;
			}
			transit.setPolicy(route);
			transit.search(start,end);
			
			setTimeout(function(){
				var resultHtml = $("#list").html();
				if(resultHtml=='') {
					$.alert("暂无数据");
					$.AMUI.progress.done();
				}
			},2000);
			
			saveToLocal(start, end);
			$(".history").hide();
			$(".sites").hide();
			$("#driving_way").show();
        	$("#list").show();
		}
        
        //加载搜索历史
        var focus;
        $('input').focus(function(){
        	$(".sites").hide();
        	$("#list").hide();
        	var key = "search-history-transfer";
        	if(!window.localStorage){
 			alert('This browser does NOT support search history');
		} else {
			var value = localStorage.getItem(key);
			if(value) {
				var historyArr = value.split("|");
				var jsonArr = toJsonArr(historyArr);
				var data = {"result": jsonArr};
				var myTemplate = Handlebars.compile($('#list-site-history').html());
				var html = myTemplate(data);
				$("#historylist").html(html);
				$("#clearHistory").html("清空搜索历史");
			} else {
				$("#clearHistory").html("暂无搜索记录");
			}
			$(".am-content").hide();
        		$(".history").show();
        		focus=$(this);
		}
        });
        
        $('input').keyup(function(){
        	$(".sites").show();
        	var keyword = $(this).val();
        	if(keyword=='') {
        		$(".sites").hide();
        		$(".history").show();
        		return;
        	} else {
        		$(".history").hide();
        	}
        	var url = "taxi/json/getSiteInfoBySiteName";
        	var params = {siteName:keyword,lineId:""};
        	if(!isNaN(keyword)) {
        		params = {siteName:"",lineId:keyword};
        	}
        	$.request(url, params,function(data){
        		data = JSON.parse(data);
        	//var data = {"result":[{"siteName":"我的"}]};
	    		if(data.retCode!=0){
				$.alert(data.message);
				$.AMUI.progress.done();
				return;
			}
			if(data.result.length>0){
				data = uniqResult(data);
				var myTemplate = Handlebars.compile($('#list-site-templ').html());
				var html = myTemplate(data);
        			$("#list").hide();
				$('.sites').html(html);
			}
			$.AMUI.progress.done();
        	});
        });
        
        function uniqResult(data) {
        	//去重
	    	var result = data.result;
	    	var uniqArr = [];
	    	var uniqResult = [];
	    	for(var i=0;i<result.length;i++) {
	    		if(uniqArr.indexOf(result[i].siteName)==-1){
	    			uniqArr.push(result[i].siteName);
	    			uniqResult.push(result[i]);
	    		}
	    	}
	    	data.result = uniqResult;
	    	return data;
        }
        
        function searchHistory(obj) {
        	$(".history").hide();
        	var key = $(obj).find("span").html();
        	var start = key.split("-")[0];
        	var end = key.split("-")[1];
        	$("#start").val(start);
        	$("#target").val(end);
        	var i = $(".routeStyle .select").attr("value");
			map.clearOverlays(); 
			map.centerAndZoom(new BMap.Point(119.486324, 31.424256), 10);
			search(start,end,routePolicy[i]); 
        }
        
        function searchSite(obj) {
        	var key = $(obj).find("span").html();
        	focus.val(key); 
        	$(".sites").hide();
        	var start = $('start').val();
        	var end = $('#target').val();
        	if(start!='' && end != '') {
        		var i = $(".routeStyle .select").attr("value");
    			map.clearOverlays(); 
    			map.centerAndZoom(new BMap.Point(119.486324, 31.424256), 10);
    			search(start,end,routePolicy[i]); 
        	}
        }
        
        //记录搜索历史
        function saveToLocal(start, end) {
        	if(start==null || start=='' || end==null || end=='') {
        		return;
        	}
        	var key ="search-history-transfer";
        	if(window.localStorage) {
        		var value = localStorage.getItem(key);
        		if(value) {
        			var historyArr = value.split("|");
        			historyArr.splice(0, 0, start+"-"+end);
        			historyArr = unique(historyArr);
        			historyArr = historyArr.splice(0, 10);
        			var newValue = "";
        			for(i=0; i<historyArr.length; i++) {
        				newValue += historyArr[i] + "|";
        			}
        			localStorage.setItem(key, newValue.substring(0,newValue.length-1));
        		} else {
        			localStorage.setItem(key,start+"-"+end);
        		}
        	}
        }
        
        //清除搜索历史
        function clearHistory() {
        	var key ="search-history-transfer";
        	$("#historylist").html("");
        	if(window.localStorage) {
        		localStorage.removeItem(key);
        	}
        }
        
        function toJsonArr(arr) {
        	var jsonArr = [];
        	for(var i=0; i<arr.length; i++) {
        		var json = {"keyword" : arr[i]};
        		jsonArr.push(json);
        	}
        	return jsonArr;
        }
        
        //数组去重
        function unique(arr) {
    		var result = [], hash = {};
    		for (var i = 0, elem; (elem = arr[i]) != null; i++) {
        		if (!hash[elem]) {
            			result.push(elem);
            			hash[elem] = true;
        		}
    		}
    		return result;
	}
	
	function explainSite(desc) {
		var infoArr = desc.split("，");
		var resultArr = [];
		for(var i=0;i<infoArr.length;i++) {
			var index = infoArr[i].indexOf("乘坐");
			if(index!=-1){
				resultArr.push(infoArr[i].substring(index+2));
			}
		}
		return resultArr;
	}
	
	function explainRouteTotal(desc) {
		var infoArr = desc.split("，");
		var routeTotal = 0;
		for(var i=0;i<infoArr.length;i++) {
			var index = infoArr[i].indexOf("步行约");
			if(index!=-1){
				routeTotal += parseInt(infoArr[i].substring(index+3,infoArr[i].length-1));
			}
		}
		return routeTotal;
	}
	
	function exchange() {
		var start = $("#start").val();
		var end = $("#target").val();
		if(start!='输入起点'&&end!='输入终点') {
			$("#start").val(end);
			$("#target").val(start);
			var i = $(".routeStyle .select").attr("value");
			map.clearOverlays(); 
			map.centerAndZoom(new BMap.Point(119.486324, 31.424256), 10);
			search(end,start,routePolicy[i]); 
		}
	}
	
	$(".routeStyle").click(function(){
		var arr = $(".routeStyle");
		for(var i=0;i<arr.length;i++) {
			$(arr[i]).removeClass("select");
		}
		$(this).addClass("select");
		var i = $(this).attr("value");
		map.clearOverlays(); 
		var start = $("#start").val();
		var end = $("#target").val();
		map.centerAndZoom(new BMap.Point(119.486324, 31.424256), 10);
		search(start,end,routePolicy[i]); 
	});
	
	$("#sy").click(function(){
		location.href = "bus.html?longitude=" + longitude + "&latitude=" + latitude + "&phone=" + phone + "&tt="+Math.random();
	});
	
	$("#wdsc").click(function(){
		location.href = "collection.html?longitude=" + longitude + "&latitude=" + latitude + "&phone=" + phone + "&tt="+Math.random();
	});
	
	//-->
	</script>
	

 
</body>
</html>
